<template>
  <i-biz-control-base
    v-if="!!c.state.isCreated"
    :controller="c"
    :class="[ns.m(c.state.viewMode.toLowerCase()), ns.b(position)]"
  >
    <!-- 绘制最前方的额外按钮 -->
    <template v-if="c.state.extraButtons.before?.length > 0">
      <view
        v-for="button in c.state.extraButtons.before"
        :key="button.id"
        :class="[ns.e('item'), ns.e('item-extra'), ns.e(`item-${position}`)]"
      >
        <button
          :title="button.tooltip"
          :size="btnSize"
          @click="(e) => handleClick(button, e)"
        >
          <iBizIcon v-if="!!button.sysImage" :icon="button.sysImage" />
          {{ btnCaption(button, c.state.viewMode) }}
        </button>
      </view>
    </template>
    <!-- 绘制指定位置后的额外按钮 -->
    <template v-for="(item, index) in modelData.detoolbarItems" :key="item.id">
      <template v-if="c.state.extraButtons[index]?.length > 0">
        <!-- 绘制工具栏项 -->
        <view v-if="item.itemType === 'ITEMS'">TODO暂未支持弹框绘制</view>
        <view
          v-else-if="
            item.itemType === 'DEUIACTION' &&
            c.state.buttonsState[item.id]?.visible
          "
          :key="item.id"
          :class="[
            ns.e('item'),
            ns.e('item-deuiaction'),
            ns.e(`item-${position}`),
          ]"
        >
          <button
            :title="item.tooltip"
            :size="btnSize"
            :type="btnType(item)"
            :loading="c.state.buttonsState[item.id].loading"
            :disabled="c.state.buttonsState[item.id].disabled"
            @click="(e) => handleClick(item, e)"
          >
            <iBizIcon v-if="item.sysImage" :icon="item.sysImage" />
            {{ btnCaption(item, c.state.viewMode) }}
          </button>
        </view>
        <!-- 绘制额外按钮 -->
        <view
          v-for="button in c.state.extraButtons[index]"
          :key="button.id"
          :class="[ns.e('item'), ns.e('item-extra'), ns.e(`item-${position}`)]"
        >
          <button
            :title="button.tooltip"
            :size="btnSize"
            @click="(e) => handleClick(button, e)"
          >
            <iBizIcon v-if="button.sysImage" :icon="button.sysImage" />
            {{ btnCaption(button, c.state.viewMode) }}
          </button>
        </view>
      </template>
      <template v-else>
        <view v-if="item.itemType === 'ITEMS'">TODO暂未支持弹框绘制</view>
        <view
          v-else-if="
            item.itemType === 'DEUIACTION' &&
            c.state.buttonsState[item.id]?.visible
          "
          :class="[
            ns.e('item'),
            ns.e('item-deuiaction'),
            ns.e(`item-${position}`),
          ]"
        >
          <button
            :class="ns.em(`item-${position}`, 'button')"
            :plain="position === 'right'"
            :title="item.tooltip"
            :size="btnSize"
            :type="btnType(item)"
            :loading="c.state.buttonsState[item.id].loading"
            :disabled="c.state.buttonsState[item.id].disabled"
            @click="(e) => handleClick(item, e)"
          >
            {{ btnCaption(item, c.state.viewMode) }}
          </button>
        </view>
      </template>
    </template>
    <!-- 绘制最后方的额外按钮 -->
    <template v-if="c.state.extraButtons.after?.length > 0">
      <view
        v-for="button in c.state.extraButtons.before"
        :key="button.id"
        :class="[ns.e('item'), ns.e('item-extra'), ns.e(`item-${position}`)]"
      >
        <button
          :title="button.tooltip"
          :size="btnSize"
          @click="(e) => handleClick(button, e)"
        ></button>
      </view>
    </template>
  </i-biz-control-base>
</template>
<script lang="ts">
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: "shared"
  },
};
</script>
<script setup lang="ts">
import { computed, PropType } from "vue";
import {
  IDETBUIActionItem,
  IDEToolbar,
  IDEToolbarItem,
} from "@ibiz/model-core";
import {
  IExtraButton,
  ToolbarController,
} from "@ibiz-template/runtime";
import { useControlController, useNamespace } from "@/use";

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IDEToolbar>,
    required: true,
  },
  context: { type: Object as PropType<IContext>, required: true },
  params: { type: Object as PropType<IParams>, default: () => ({}) },
});

const c = useControlController((...args) => new ToolbarController(...args));
const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`);

// 点击事件
const handleClick = async (
  item: IDEToolbarItem | IExtraButton,
  event: MouseEvent
) => {
  await c.onItemClick(item, event);
};

let position = "";

switch (props.modelData.toolbarStyle) {
  case "MOBNAVRIGHTMENU":
    position = "right";
    break;
  case "MOBNAVLEFTMENU":
    position = "left";
    break;
  case "MOBBOTTOMMENU":
    position = "bottom";
    break;
  default:
    break;
}

const btnSize = computed(() => {
  return "mini";
});

const btnType = (item: IDEToolbarItem) => {
  return (item as IDETBUIActionItem).actionLevel! > 100
    ? "primary "
    : "default";
};

const btnCaption = (item: IDEToolbarItem | IExtraButton, viewMode: string) => {
  if (viewMode === "EMBED") {
    return item.caption;
  }
  return (item as IDEToolbarItem).showCaption ||
    (item as IExtraButton).buttonType === "extra"
    ? item.caption
    : "";
};
</script>
<style lang="scss">
@import "./i-biz-toolbar-control.scss";
</style>
